<template>
    <div class="page-step">
      <div class="top_bg">
        <div class="step_item_content">
          <div class="step_item" style="position:relative">
            <img src="../../public/imgs/third_step_111.png" alt="" class="step_1" v-show="state1==true&&state2==true&&state3==true">
           <div class="left" :class="{'active':state1}">
              <span v-show="!state1">1</span>
              <span v-show="state1"><img src="../../public/imgs/third_step_active.png" alt=""></span>
              <div class="after"></div>
              <div class="success">
              </div>
           </div>
           <div class="center">
             <h1 class="title">
              2088元礼包+2%加息券
             </h1>
             <span class="des">
              注册即领，提钱出发赚过瘾
             </span>
           </div>
           <div class="right" @click="obtain(state1,1)" :class="{'left_disabled':state1==true}">{{getStr(state1,1)}}</div>
          </div>

          <div class="step_item">
           <div class="left" :class="{'active':state2}">
             <span  v-show="!state2">2</span>
               <span v-show="state2"><img src="../../public/imgs/third_step_active.png" alt=""></span>
             <div class="after"></div>
           </div>
           <div class="center">
             <h1 class="title">
              18888元体验金
             </h1>
             <span class="des">
             轻松绑卡，万元体验金收益全归你
             </span>
           </div>
           <div class="right" @click="obtain(state2,2)" :class="{'left_disabled':state2==true}">{{getStr(state2,2)}}</div>
          </div>
          <div class="step_item">
           <div class="left" :class="{'active':state3}">
              <span v-show="!state3">3</span>
               <span v-show="state3"><img src="../../public/imgs/third_step_active.png" alt=""></span>
             </div>
           <div class="center">
             <h1 class="title">
             嗨赚优选第一桶金
             </h1>
             <span class="des">
             首投专享,15%预期年化新手标
             </span>
           </div>
           <div class="right" @click="obtain(state3,3)" :class="{'left_disabled':state3==true}">{{getStr(state3,3)}}</div>
          </div>

          <div class="jump_herf" @click="jumpins()">
           <span class="title">
             新人操作指南<span style="margin-left:5px;">></span>
           </span>
          <span class="jump_des">
            从注册到投资，触发壕礼应有尽有
          </span>
          </div>


        <div class="step_two_contet">
          <img src="../../public/imgs/third_step_qust.png" alt="" class="qust" @click="alertmsk()">
          <img src="../../public/imgs/third_step_222.png" alt="" class="step_2" @click="alertmsk()" v-show="state4==true&&state5==true">
           <div class="step_two_item">
               <div><img src="../../public/imgs/third_step_2088.png" class="img1"></div>
               <div class="btn" :class="{'btn_disabled':state4==true}"  @click="obtain(state4,4)">
                 {{getStr(state4,4)}}
               </div>
           </div>
           <div class="step_two_item">
           <div><img src="../../public/imgs/third_step_2.png" class="img1"></div>
               <div class="btn" :class="{'btn_disabled':state5==true}" @click="obtain(state5,5)">
                 {{getStr(state5,5)}}
               </div>
           </div>
        </div>

    <div class="step_three_contet">
       <img src="../../public/imgs/third_step_333.png" alt="" class="step_3"  v-show="state6==true">
          <div class="top">
           <div>
             <img src="../../public/imgs/three_step_gift.png" alt="">
           </div>
           <div class="msg">
             <h1>
              邀请一位好友注册
             </h1>
             <span class="step_three_des">
                享好友收益16.8%返现
             </span>
           </div>
          </div>
          <div class="bottom" :class="{'btn_disabled':state6==true}" @click="obtain(state6,6)">
              {{getStr(state6,6)}}
          </div>
    </div>


</div>
 <div class="step_four_contet">
   <div>
     <img  src="../../public/imgs/three_step_a.png" alt="" @click="jumpH5(1,'aboutus.html')" >
    <img src="../../public/imgs/three_step_b.png" alt="" @click="jumpH5(1,'safeensure.html')">
      <img src="../../public/imgs/three_step_c.png" alt="" @click="jumpH5(2,'cooperPartner.html')" style="margin-right:0px;">
   </div>

   </div>

  <div class="step_five_contet">
       <img src="../../public/imgs/three_step_gift_top.png" alt="" class="animate_1" v-show="!(isreceive==false&&state1==true&&state2==true&&state3==true&&state6==true&&state4==true&&state5==true)">
        <img src="../../public/imgs/three_step_gift_bottom.png" alt="" class="animate_2 ">
        <img src="../../public/imgs/three_step_gift_top.png" alt="" class="animate_3 " v-show="(isreceive==false&&state1==true&&state2==true&&state3==true&&state6==true&&state4==true&&state5==true)">
        <img src="../../public/imgs/third_step_caidai1.png" alt="" class="caida boomend1" v-show="isreceive==false&&state1==true&&state2==true&&state3==true&&state6==true&&(state4==true&&state5==true)">
        <img src="../../public/imgs/third_step_caidai2.png" alt="" class="caida boomend2" v-show="isreceive==false&&state1==true&&state2==true&&state3==true&&state6==true&&(state4==true&&state5==true)">
        <img src="../../public/imgs/third_step_caidai3.png" alt="" class="caida boomend3" v-show="isreceive==false&&state1==true&&state2==true&&state3==true&&state6==true&&(state4==true&&state5==true)">
        <img src="../../public/imgs/third_step_caidai4.png" alt="" class="caida boomend4" v-show="isreceive==false&&state1==true&&state2==true&&state3==true&&state6==true&&(state4==true&&state5==true)">
        <img src="../../public/imgs/third_step_caidai5.png" alt="" class="caida boomend5" v-show="isreceive==false&&state1==true&&state2==true&&state3==true&&state6==true&&(state4==true&&state5==true)">
         <img src="../../public/imgs/third_step_shown.png" alt="" class="caida boomend6" v-show="isreceive==false&&state1==true&&state2==true&&state3==true&&state6==true&&(state4==true&&state5==true)">

   </div>
      </div>

    <div  @click="submit()" :class="isreceive==false&&state1==true&&state2==true&&state3==true&&state6==true&&(state4==true&&state5==true)? 'submit_btn_disabled':'submit_btn'">
      <span v-show="state1==true&&state2==true&&state3==true&&state6==true&&(state4==true&&state5==true)&&isreceive==false">
       666毕业大礼包
      </span>
      <span v-show="!(state1==true&&state2==true&&state3==true&&state6==true&&(state4==true&&state5==true))&&isreceive==false">
       毕业后才可领取哟
      </span>
       <span v-show="(state1==true&&state2==true&&state3==true&&state6==true&&(state4==true&&state5==true))&&isreceive==true">
       奖励已领取
      </span>
    </div>

   <div class="copyright">
      <div class="title" @click="jumpH5(1,'customProxy',true)">
         <div class="left">
          <h1>在线客服 为您答疑</h1>
          <div>服务时间：09:30—22:00 </div>
         </div>
         <div class="right">
             <img src="../../public/imgs/third_step_phone.png" alt=""   >
         </div>
      </div>

      <div class="exp">
        在法律允许范围内，优选理财有权解释、修改本活动规则，暂停或终止本活动。如有变更或结束，以平台公告为准。
        <div style="margin-top:40px;text-align:center">理财有风险，投资需谨慎</div>
      </div>
   </div>
    <mt-popup
      v-model="popupVisible"
      position="center">
       <div class="pouple">
         <div class="btn" @click="view()">
             查看礼包
         </div>
       </div>
    </mt-popup>

  <mt-popup
      v-model="alertshown"
      position="center">
      <div class="qusemask">
        每种券均使用其中一张即可
      </div>
    </mt-popup>

     <div class="task" v-show="task">
        奖励已领取
       </div>
    </div>
</template>

<script>
import { Popup,Toast } from "mint-ui";
export default {
  name: "aboutUs",
  data() {
    return {
      state1: false,
      state2: false,
      state3: false,
      state4: false,
      state5: false,
      state6: false,
      popupVisible: false,
      isfirst: true,
      sessionid: "",
      isreceive:false,
      alertshown:false,
      task:false,
    };
  },
  mounted() {},
  methods: {
    alertmsk(){
     this.alertshown=true;
    },
    view() {
      this.popupVisible = false;
      this.Uitis.JumpNavite("jumpToCoupon");
    },
    jumpins(){
        let urlObj = {
            link: `${this.Interface.getH5}newSchoolGuide.html`
          };
      this.Uitis.Jump(urlObj);
    },
    jumpH5(type, url, islogin) {
      if (islogin) {
        if (this.sessionid == "") {
          this.Uitis.JumpNavite("jumpToLogin");
        } else {
          this.Uitis.JumpNavite("jumpToCustomerService");
        }
      } else {
        if (type == 1) {
          let urlObj = {
            link: `${this.Interface.getH5}${url}`
          };
          this.Uitis.Jump(urlObj);
        } else {
          let urlObj = {
            link: `${this.Interface.getWeixinHost}${url}`
          };
          this.Uitis.Jump(urlObj);
        }
      }
    },
    submit() {
      if(this.isreceive==true){
         this.task=true;
         let _this=this;
         setTimeout(() => {
           _this.task=false;
         }, 1000);
      }else{
        if(this.state1==true&&this.state2==true&&this.state3==true&&this.state6==true&&(this.state4==true&&this.state5==true)&&this.isreceive==false){
        this.$http
          .post(this.Interface.PostTaskCollege, { sessionid: this.sessionid })
          .then(res => {
            if (res.data.success&&res.data.data=="000000") {
              $(".animate_3").removeClass("shakes");
                this.popupVisible=true;
                this.isreceive=true;
                this.state1 = true;
                this.state2 = true;
                this.state3 = true;
                this.state4 = true;
                this.state5 = true;
                this.state6 = true;
            }else{
             Toast({
                  message: result.error_msg,
                  position: "center",
                  duration: 2000
                });
            }
          })
          ;
      } else {
        return
      }
      }

    },
    getStr(state, type) {
      let str = "";
      if (state) {
        switch (type) {
          case 1:
            str = "已获取";
            break;
          case 2:
            str = "已获取";
            break;
          case 3:
            str = "已投资";
            break;
          case 4:
            str = "已使用";
            break;
          case 5:
            str = "已使用";
            break;
          case 6:
            str = "已邀请";
            break;
        }
      } else {
        switch (type) {
          case 1:
            str = "立即注册";
            break;
          case 2:
            str = "立即绑卡";
            break;
          case 3:
            str = "立即投资";
            break;
          case 4:
            str = "立即使用";
            break;
          case 5:
            str = "立即使用";
            break;
          case 6:
            str = "立即邀请";
            break;
        }
      }
      return str;
    },
    obtain(state, type) {
      if (this.sessionid == "") {
        this.Uitis.Login();
        return;
      } else {
        if (!state) {
          switch (type) {
            case 2: //跳转绑卡
              this.Uitis.JumpNavite("jumpToAddBankCard");
              break;
            case 3: //跳转投资
              this.Uitis.JumpNavite("jumpToProductList");
              break;
            case 4: //跳转投资
              this.Uitis.JumpNavite("jumpToProductList");
              break;
            case 5: //跳转投资
              this.Uitis.JumpNavite("jumpToProductList");
              break;
            case 6: //邀请好友
              let url = {
                link: `${this.Interface.getWeixinHost}inviteInfo.html`
              };
              this.Uitis.Jump(url);
              break;
          }
        }
      }
    },
    getState() {
      this.$http
        .get(this.Interface.getTaskCollegr, {
          params: { sessionid: this.sessionid }
        })
        .then(res => {
          if (res.data.success==false&&res.data.data.error_code=="700002") {//已经领取状态
            this.isreceive=true;
             this.state1 = true;
            this.state2 = true;
            this.state3 = true;
            this.state4 = true;
            this.state5 = true;
            this.state6 = true;
          }else if(res.data.success){
            this.state1 = res.data.data.register;
            this.state2 = res.data.data.bindCard;
            this.state3 = res.data.data.noviceProduct;
            this.state4 = res.data.data.coupons;
            this.state5 = res.data.data.addInterest;
            this.state6 = res.data.data.invitation;
             this.isreceive=false;
             if(this.state1==true&&this.state2==true&&this.state3==true&&this.state6==true&&(this.state4==true&&this.state5==true)){
              this.$nextTick(function(){
                 $(".animate_3").addClass("shakes");
              })
            }
          }
        });
    }
  },
  created() {

    this.Uitis.getInfo().then(res => {
      if (res.uId == "") {
        this.isLogin = false;
      } else {
        this.sessionid = res.sessionid;
        this.getState();
      }
    });
  }
};
</script>

<style lang="less" scoped>
  .task{
   color: #fff;
   background: rgba(0,0,0, 0.5);
   position: fixed;
   top:50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 20px;
   border-radius: 15px;
   z-index: 10000;
  }
.page-step {
  .mint-popup {
    background: transparent !important;
  }

  .pouple {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 524px;
    height: 708px;
    background: url("../../public/imgs/three_step_pouple.png") no-repeat;
    background-size: cover;
    .btn {
      margin-bottom: 55px;
      line-height: 80px;
      text-align: center;
      color: #fff;
      font-size: 32px;
      width: 320px;
      height: 80px;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      border-radius: 30px;
      background-color: #eb4355;
      -webkit-box-shadow: 0 10px 20px rgba(233, 72, 159, 0.5);
      -moz-box-shadow: 0 10px 20px rgba(233, 72, 159, 0.5);
      box-shadow: 0 10px 20px rgba(233, 72, 159, 0.5);
      background-image: -webkit-linear-gradient(top, #ffc240, #ff6317);
      background-image: -moz-linear-gradient(top, #ffc240, #ff6317);
      background-image: -o-linear-gradient(top, #ffc240, #ff6317);
      background-image: -ms-linear-gradient(top, #ffc240, #ff6317);
      background-image: linear-gradient(to bottom, #ffc240, #ff6317);
    }
  }
  @-webkit-keyframes shake {
    0% {
     transform: translate3d(-0, 30px, 0)
    }
    7% {
     transform: translate3d(-0,25px, 0)
    }
    14% {
    transform: translate3d(-0, 20px, 0)
    }
     21% {
    transform: translate3d(-0, 15px, 0)
    }
    28% {
    transform: translate3d(-0, 10px, 0)
    }
     35% {
    transform: translate3d(-0, 5px, 0)
    }
      42% {
    transform: translate3d(-0, 0px, 0)
    }
     49% {
    transform: translate3d(-0, 5px, 0)
    }
       58% {
    transform: translate3d(-0, 10px, 0)
    }
         68% {
    transform: translate3d(-0, 15px, 0)
    }
          75% {
    transform: translate3d(-0, 20px, 0)
    }
           80% {
    transform: translate3d(-0, 25px, 0)
    }
             100% {
    transform: translate3d(-0, 30px, 0)
    }

  }
  @keyframes shake {
    0% {
     transform: translate3d(-0, 30px, 0)
    }
    7% {
     transform: translate3d(-0,25px, 0)
    }
    14% {
    transform: translate3d(-0, 20px, 0)
    }
     21% {
    transform: translate3d(-0, 15px, 0)
    }
    28% {
    transform: translate3d(-0, 10px, 0)
    }
     35% {
    transform: translate3d(-0, 5px, 0)
    }
      42% {
    transform: translate3d(-0, 0px, 0)
    }
     49% {
    transform: translate3d(-0, 5px, 0)
    }
       58% {
    transform: translate3d(-0, 10px, 0)
    }
         68% {
    transform: translate3d(-0, 15px, 0)
    }
          75% {
    transform: translate3d(-0, 20px, 0)
    }
           80% {
    transform: translate3d(-0, 25px, 0)
    }
             100% {
    transform: translate3d(-0, 30px, 0)
    }

  }
  // @keyframes shoot1 {
  //   0% {
  //     transform: translate3d(0, 0, 0) scale(0.1);
  //   }
  //   95% {
  //     opacity: 1;
  //   }
  //   100% {
  //     transform: translate3d(-140px, -130px, 0) scale(1);
  //     opacity: 0;
  //   }
  // }

  // @keyframes shoot2 {
  //   0% {
  //     transform: translate3d(0, 0, 0) scale(0.1);
  //   }
  //   95% {
  //     opacity: 1;
  //   }
  //   100% {
  //     transform: translate3d(-120px, -100px, 0) scale(1);
  //     opacity: 0;
  //   }
  // }

  // @keyframes shoot3 {
  //   0% {
  //     transform: translate3d(0, 0, 0) scale(0.1);
  //   }
  //   95% {
  //     opacity: 1;
  //   }
  //   100% {
  //     transform: translate3d(95px, -113px, 0) scale(1);
  //     opacity: 0;
  //   }
  // }

  // @keyframes shoot4 {
  //   0% {
  //     transform: translate3d(0, 0, 0) scale(0.1);
  //   }
  //   95% {
  //     opacity: 1;
  //   }
  //   100% {
  //     transform: translate3d(150px, -85px, 0) scale(1);
  //     opacity: 0;
  //   }
  // }
  // @keyframes shoot5 {
  //   0% {
  //     transform: translate3d(0, 0, 0) scale(0.1);
  //   }
  //   95% {
  //     opacity: 1;
  //   }
  //   100% {
  //     transform: translate3d(-125px, -20px, 0) scale(1);
  //     opacity: 0;
  //   }
  // }
  .qusemask{
    background: #fff;
    width: 620px;
    border-radius: 15px;
    height: 90px;
    line-height: 90px;
    text-align: center;
  }

  .shakes {
    -webkit-animation: shake 1.2s infinite;
    animation: shake 1.2s infinite;
  }
  .boomend1 {
    left: 185px !important;
    width: 14px;
    height: 16px;
    bottom: 150px !important;
  }
  .boomend2 {
    left: 225px !important;
    bottom: 230px !important;
     width: 17px;
    height: 18px;
  }
  .boomend3 {
    left: 480px !important;
    bottom: 250px !important;
       width: 8px;
    height: 19px;
  }
  .boomend4 {
    left: 555px !important;
    bottom: 212px !important;
        width: 19px;
    height: 22px;
  }
  .boomend5 {
    left: 530px !important;
    bottom: 110px !important;
         width: 25px;
    height: 32px;
  }
    .boomend6 {
    left: 210px !important;
    bottom: 60px !important;
    width: 402px;
    height: 179px;
  }
  background: #1925b7;
  .top_bg {
    width: 100%;
    min-height: 500px;
    padding-top: 615px;
    background: url("../../public/imgs/third_step_bg.png") no-repeat;
    background-size: 100%;
        .step_four_contet {
        margin-top: 165px;
        width: 100%;
        height: 235px;;
        overflow-x: scroll;
        overflow-y: none;
        div{
          width: 955px;
          padding: 0px 30px;
          img {
          width: 300px;
          height: 230px;
          flex: 200px;
          display: inline-block;
          margin-right: 20px
        }
        }

      }
    .step_item_content {
      padding: 0 30px;
      .step_item {
        .step_1 {
          position: absolute;
          width: 268px;
          height: 142px;
          right: 0px;
          top: -80px;
        }
        width: 100%;
        background: #fff;
        height: 150px;
        box-sizing: border-box;
        border-radius: 15px;
        padding: 35px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        .active {
          background: #fff !important;
        }
        .left {
          position: relative;
          width: 38px;
          height: 38px;
          border-radius: 50%;
          background: #ce3959;
          color: #fff;
          line-height: 38px;
          text-align: center;
          .after {
            position: absolute;
            display: block;
            width: 2px;
            border-left: 2px solid #fff;
            border-right: 2px solid #fff;
            height: 132px;
            background: #ce3959;
            z-index: 999;
            left: 15px;
          }
        }

        .left_disabled {
          color: #aba33b !important;
        }
        .center {
          padding-left: 30px;
          flex: 1;
          .title {
            font-size: 32px;
            color: #d53257;
            padding-bottom: 20px;
          }
          .des {
            color: #999999;
            font-size: 24px;
          }
        }
        .right {
          line-height: 60px;
          color: #333333;
          text-align: center;
          width: 160px;
          height: 60px;
          -webkit-border-radius: 30px;
          -moz-border-radius: 30px;
          border-radius: 30px;
          background-color: #ffcc43;
          background-image: -webkit-linear-gradient(bottom, #f9ce4f, #fffd3d);
          background-image: -moz-linear-gradient(bottom, #f9ce4f, #fffd3d);
          background-image: -o-linear-gradient(bottom, #f9ce4f, #fffd3d);
          background-image: -ms-linear-gradient(bottom, #f9ce4f, #fffd3d);
          background-image: linear-gradient(to top, #f9ce4f, #fffd3d);
        }
      }
      .jump_herf {
        border-radius: 15px;
        margin-top: 3px;
        padding: 0px 40px;
        height: 60px;
        line-height: 60px;
        background: rgba(0, 0, 0, 0.3);
        color: #fff;
        .title {
          font-size: 28px;
        }
        .jump_des {
          margin-left: 15px;
          font-size: 24px;
          color: #ffcc43;
          text-decoration: underline #ffcc43;
        }
      }
      .step_two_contet {
        position: relative;
        margin-top: 160px;
        display: flex;
        justify-content: space-between;
        .qust{
          width: 30px;
          height: 30px;
          position: absolute;
          right: 150px;
          top:-60px;
        }
        .step_2 {
          position: absolute;
          width: 268px;
          height: 142px;
          right: 0px;
          top: -80px;
        }
        .step_two_item {
          box-sizing: border-box;
          padding: 32px 0px 40px 0px;
          width: 305px;
          // height: 232px;
          background: #fff;
          border-radius: 15px;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          align-items: center;
          .img1 {
            width: 246px;
            height: 100px;
          }
          .btn {
            color: #fff;
            margin-top: 25px;
            width: 225px;
            height: 60px;
            line-height: 60px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            background-color: #eb4355;
            -webkit-box-shadow: 0 10px 20px rgba(233, 72, 159, 0.5);
            -moz-box-shadow: 0 10px 20px rgba(233, 72, 159, 0.5);
            box-shadow: 0 10px 20px rgba(233, 72, 159, 0.5);
            background-image: -webkit-linear-gradient(top, #f352a9, #ff3636);
            background-image: -moz-linear-gradient(top, #f352a9, #ff3636);
            background-image: -o-linear-gradient(top, #f352a9, #ff3636);
            background-image: -ms-linear-gradient(top, #f352a9, #ff3636);
            background-image: linear-gradient(to bottom, #f352a9, #ff3636);
          }
          .btn_disabled {
            background: rgba(235, 67, 85, 0.5);
          }
        }
      }
      .step_three_contet {
        position: relative;
        text-align: center;
        flex-direction: column;
        margin-top: 150px;
        background: #fff;
        border-radius: 15px;
        width: 100%;
        padding: 42px 0px 27px 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        .step_3 {
          position: absolute;
          width: 268px;
          height: 142px;
          right: 0px;
          top: -80px;
        }
        .top {
          img {
            width: 65px;
            height: 64px;
          }
          .msg {
            margin-left: 48px;
          }
          display: flex;
          width: 365px;
          justify-content: center;
          align-items: center;
          .step_three_des {
            display: block;
            color: #999999;
            font-size: 24px;
            margin-top: 10px;
          }
          h1 {
            font-size: 28px;
            color: #d53257;
          }
        }

        .bottom {
          margin-top: 35px;
          color: #fff;
          font-size: 28px;
          line-height: 70px;
          width: 480px;
          height: 70px;
          -webkit-border-radius: 30px;
          -moz-border-radius: 30px;
          border-radius: 30px;
          background-color: #eb4355;
          -webkit-box-shadow: 0 10px 20px rgba(233, 72, 159, 0.5);
          -moz-box-shadow: 0 10px 20px rgba(233, 72, 159, 0.5);
          box-shadow: 0 10px 20px rgba(233, 72, 159, 0.5);
          background-image: -webkit-linear-gradient(top, #f352a9, #ff3636);
          background-image: -moz-linear-gradient(top, #f352a9, #ff3636);
          background-image: -o-linear-gradient(top, #f352a9, #ff3636);
          background-image: -ms-linear-gradient(top, #f352a9, #ff3636);
          background-image: linear-gradient(to bottom, #f352a9, #ff3636);
        }
        .btn_disabled {
          background: rgba(235, 67, 85, 0.5);
        }
      }

    }
    .step_five_contet {
      height: 500px;
      position: relative;
      .caida {
        position: absolute;
        left: 350px;
        bottom: 125px;
        z-index: 5;
      }
      .animate_1 {
        position: absolute;
        width: 200px;
        height: 200px;
        left: 50%;
        bottom: 50px;
        z-index: 999;
        margin-left: -100px;
      }
      .animate_2 {
        position: absolute;
        width: 200px;
        height: 200px;
        left: 50%;
        bottom: 0px;
        margin-left: -100px;
      }
      .animate_3 {
        position: absolute;
        width: 200px;
        height: 200px;
        left: 50%;
        bottom: 90px;
        z-index: 999;
        margin-left: -100px;
      }
    }
  }
  .submit_btn {
    color: #fff;
    line-height: 80px;
    text-align: center;
    font-size: 32px;
    margin: 60px auto;
    width: 420px;
    height: 80px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color: #eb4355;
    -webkit-box-shadow: 0 10px 20px rgba(12, 18, 93, 0.1);
    -moz-box-shadow: 0 10px 20px rgba(12, 18, 93, 0.1);
    box-shadow: 0 10px 20px rgba(12, 18, 93, 0.1);
    background-image: -webkit-linear-gradient(top, #396ee7, #1925b7);
    background-image: -moz-linear-gradient(top, #396ee7, #1925b7);
    background-image: -o-linear-gradient(top, #396ee7, #1925b7);
    background-image: -ms-linear-gradient(top, #396ee7, #1925b7);
    background-image: linear-gradient(to bottom, #396ee7, #1925b7);
  }
  .submit_btn_disabled {
    color: #fff;
    line-height: 80px;
    text-align: center;
    font-size: 32px;
    margin: 60px auto;
    width: 420px;
    height: 80px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color: #eb4355;
    -webkit-box-shadow: 0 10px 20px rgba(233, 72, 159, 0.5);
    -moz-box-shadow: 0 10px 20px rgba(233, 72, 159, 0.5);
    box-shadow: 0 10px 20px rgba(233, 72, 159, 0.5);
    background-image: -webkit-linear-gradient(top, #ffc240, #ff6317);
    background-image: -moz-linear-gradient(top, #ffc240, #ff6317);
    background-image: -o-linear-gradient(top, #ffc240, #ff6317);
    background-image: -ms-linear-gradient(top, #ffc240, #ff6317);
    background-image: linear-gradient(to bottom, #ffc240, #ff6317);
  }
  .copyright {
    color: #fff;
    width: 100%;
    padding: 40px 30px;
    box-sizing: border-box;
    position: relative;
    background: url(../../public/imgs/third_bottomshown.png) no-repeat;
    background-size: 99% 99%;
    background-position: center center;
    .title {
      display: flex;
      padding: 25px 25px 20px 36px;
      background: #3b47be;
      border-radius: 15px;
      justify-content: space-between;
      .left {
        h1 {
          font-size: 28px;
        }
        div {
          font-size: 20px;
          color: #8fa4fe;
          margin-top: 15px;
        }
      }
      .right {
        img {
          width: 81px;
          height: 67px;
        }
      }
    }
    .exp {
      margin-top: 45px;
      font-size: 20px;
      color: #8fa4fe;
      line-height: 35px;
    }
  }
}
</style>
